<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Js</title>
</head>
<body>
    
</body>
<script>
// /*需求：创建方法，验证表单信息*/

// /*新手常见方法：*/
  
// function checkName(){
//     //验证方法
//     console.log("验证名字");
// }
// function checkEmaiil(){
//     //验证方法
//     console.log("验证邮箱");
// }
// function checkPassword(){
//     //验证方法
//     console.log("验证密码");
// }

// /*等价于*/

// var checkName=function(){
//     //验证方法
//     console.log("验证名字");
// };
// var checkEmail=function(){
//     //验证方法
//     console.log("验证邮箱");
// };
// var checkPassword=function(){
//     //验证方法
//     console.log("验证密码");
// };
// /*新手常见方法弊病：
// 全局变量污染*/


// /*防止全局污染方法：对象收编*/
// var CheckObject={
//     checkName:function(){
//         //验证方法
//         console.log("验证名字");
//     },
//     checkEmail:function(){
//         //验证方法
//         console.log("验证邮箱");
//     },
//     checkPassword:function(){
//         //验证方法
//         console.log("验证密码");
//     }    
// }

// /*另一种写法*/
// var CheckObject = function(){};
// CheckObject.checkName = function(){
//     //验证方法
//     console.log("验证名字");
// }
// CheckObject.checkEmail = function(){
//     //验证方法
//     console.log("验证邮箱");
// }
// CheckObject.checkPassword = function(){
//     //验证方法
//     console.log("验证密码");
// }

// /*对象收编优点：
// 减少全局变量，防止变量污染
// 封装方式缺点：
// 不适合他人复用
// 大概实例解释下啥叫不适合他人复用。
// 此处CheckObject相当于是我写的一个原型，甲想用我的这个对象，就必须记忆
// CheckObject这个单词，每次调用的时候都写一遍CheckObject。但是甲很懒，
// 他想用简单的a加点语法就能调用我写的方法，而不是每次都依赖我写的这个对
// 象（类）来用*/
/***************************************************************/

/*解决他人复用问题：1.利用function的return*/
// var CheckObject=function(){
//     return{
//         checkName:function(){
//             //验证方法
//             console.log("验证名字");
//         },
//         checkEmail:function(){
//             //验证方法
//             console.log("验证邮箱");
//         },
//         checkPassword:function(){
//             //验证方法
//             console.log("验证密码");
//         }   
//     }
// }
// /*此时甲想用我的CheckObject*/
// var a=CheckObject();
// a.checkEmail();
/*这种方式确实解决了他人复用的问题，但是坏处是CheckObject给人的感觉
就是个打酱油的。相当于一个中间变量。
此时真正引入一个类的概念*/

/*解决他人复用问题：2.js的类*/
// var CheckObject = function(){  //明明习惯，如果要生命一个类，变量首字母大写
//         this.checkName=function(){
//             //验证方法
//             console.log("验证名字");
//         };
//         this.checkEmail=function(){
//             //验证方法
//             console.log("验证邮箱");
//         };
//         this.checkPassword=function(){
//             //验证方法
//             console.log("验证密码");
//         };
// }
// /*此时甲想用我的CheckObject*/
// var a = new CheckObject();
// a.checkEmail();
/*详细解释下new 此时CheckObject指向的function被当成了一个类。new时，会开辟一段内存空间，复制
CheckObject中this的属性（即使用this.之后的东东）,同时，这段空间的prototype属性与被复制空间
的prototype指向了同一块存放专门存放prototype的内存*/
/*js类优点：
    1 解决了复用问题
    2 对象思想更直观，更符合人的认知方法
  js类缺点：
    1 按照此处这种用法，每个人new时候都拷贝了方法，然而方法是一样的，导致了内存浪费
    */
/***************************************************************/

/*解决内存浪费问题：prototype应用*/
// var CheckObject = function(){};
// CheckObject.prototype.checkName=function(){
//     //验证方法
//     console.log("验证名字");
// };
// CheckObject.prototype.checkEmail=function(){
//     //验证方法
//     console.log("验证邮箱");
// };
// CheckObject.prototype.checkPassword=function(){
//     //验证方法
//     console.log("验证密码");
// };
// /*此时甲想用我的CheckObject*/
// var a = new CheckObject();
// a.checkEmail();

/*另一种写法*/
// var CheckObject = function(){};
// CheckObject.prototype={
//     checkName:function(){
//         //验证方法
//         console.log("验证名字");
//     },
//     checkEmail:function(){
//         //验证方法
//         console.log("验证邮箱");
//     },
//     checkPassword:function(){
//         //验证方法
//         console.log("验证密码");
//     }
// }
/*两种方法无法混合使用，否则会覆盖（以下为尝试）*/
// var CheckObject = function(){};
// CheckObject.prototype.checkComfirPassword=function(){
//     //验证方法
//     console.log("验证密码一致性");
// };
// CheckObject.prototype={
//     checkName:function(){
//         //验证方法
//         console.log("验证名字");
//     },
//     checkEmail:function(){
//         //验证方法
//         console.log("验证邮箱");
//     },
//     checkPassword:function(){
//         //验证方法
//         console.log("验证密码");
//     }
// }
// CheckObject.prototype.checkPhone=function(){
//     //验证方法
//     console.log("验证手机");
// };
// var a = new CheckObject();
// a.checkPhone(); //验证手机
// a.checkEmail(); //验证邮箱
// a.checkComfirPassword(); // undefined
/***************************************************************/

/*还想更懒一点，不想反复输入a.,即使用链式调用，则每次方法返回一个this即可*/
// var CheckObject = function(){};
// CheckObject.prototype={
//     checkName:function(){
//         //验证方法
//         console.log("验证名字");
//         return this;
//     },
//     checkEmail:function(){
//         //验证方法
//         console.log("验证邮箱");
//         return this;
//     },
//     checkPassword:function(){
//         //验证方法
//         console.log("验证密码");
//         return this;
//     }
// }
//var a = new CheckObject();
//a.checkName().checkEmail().checkPassword();
</script>
</html>